/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    Navigator,
    Platform,
    NativeModules

} from 'react-native';
import Index from '../index';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import BaiduMap from './BaiduMap';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
            showPwd:true,
            staturs:false,
            num:'20',
            canClick:true
        };
        this.timer = null;
    }
    render(){
        return (
            <View style={styles.container}>
                <View>
                    <View style={styles.titleImgBox}>
                        <ImageWrapper icon={'touxiang'} width={80} height={80} style={{borderRadius:80}}/>
                    </View>
                </View>
                <View style={{backgroundColor:'#fff',paddingLeft:10,alignItems:'center'}}>
                    <View style={{height:40,borderBottomWidth:1,borderBottomColor:'#E0E0E0'}}>
                        <ImageWrapper style={styles.imgPosition} icon={'phone'}/>
                        <TextInput placeholder="请输入手机账号" style={styles.input} underlineColorAndroid={'transparent'}/>
                    </View>
                    <View style={{height:40}}>
                        <ImageWrapper style={styles.imgPosition} icon={'password'}/>
                        <TextInput secureTextEntry={true} secureTextEntry={this.state.showPwd} placeholder="请输入密码" style={styles.input} underlineColorAndroid={'transparent'}/>
                        <TouchableOpacity onPress={()=>this.showPwdText()} style={styles.showPassword}>
                            <ImageWrapper icon={this.state.showPwd?'eye':'eyeBlue'}/>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.loginBox}>
                    <TouchableOpacity onPress={()=>this.goLogin()}>
                        <View style={styles.login}>
                            <Text style={{color:'#fff'}}>登录</Text>
                        </View>
                    </TouchableOpacity>
                </View>





                <View>
                    <TouchableOpacity onPress={()=>this.sendCode()}>
                        <Text>{this.state.canClick?'获取验证码':this.state.num}</Text>
                    </TouchableOpacity>
                </View>



                
                <View style={styles.bottomText}>
                    <TouchableOpacity style={{flex:1}}>
                        <View style={{alignItems:'flex-end'}}>
                            <Text style={styles.bottomTextColor}>注册账号 </Text>
                        </View>
                    </TouchableOpacity>
                    <View>
                        <Text> | </Text>
                    </View>
                    <TouchableOpacity style={{flex:1}}>
                        <View>
                            <Text style={styles.bottomTextColor}> 忘记密码</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.versionBox}>
                    <Text style={styles.versionText}>v 1.0.0</Text>
                    <Text style={styles.versionText}>CopyRight &copy;TianxunhulianGroup</Text>
                </View>
            </View>
        )

    }


    sendCode(){
        if(this.state.canClick){
            this.setState({
                canClick:false
            })
            this.changeNum();
        }
    }


    changeNum(){
        var $this = this;
        var number = parseInt(this.state.num);
        var aa = (number-1);
        clearTimeout(this.timer);
        this.timer = null;
        this.timer = setTimeout(function(){
            if(aa==0){
                $this.setState({
                    num:'20',
                    canClick:true
                })
                return;
            }else{
                $this.setState({
                    num:(aa+'')
                })
            }
            
            $this.changeNum()
        },1000)
        
    }

    goLogin(){
        NativeModules.CommonModule.openActivity("homeActivity");
    }

    showPwdText(){
        this.setState({
            showPwd:!this.state.showPwd
        })
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
    },
    titleImgBox:{
        alignItems:'center',
        justifyContent:'center',
        height:140,
    },
    imgPosition:{
        position:'absolute',
        top:10,
        left:0
    },
    input:{
        paddingLeft:30,
        paddingRight:40,
        justifyContent:'center',
        width:width-20,
    },
    showPassword:{
        width:20,
        height:20,
        position:'absolute',
        right:10,
        top:10,
    },
    loginBox:{
        height:50,
        justifyContent:'center',
        alignItems:'center',
        marginTop:30
    },
    login:{
        backgroundColor:'#0894ED',
        width:width*3/4,
        height:40,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:5
    },
    versionBox:{
        width:width,
        alignItems:'center',
        position:'absolute',
        left:0,
        bottom:10
    },
    versionText:{
        fontSize:12,
    },
    bottomText:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        height:40
    },
    bottomTextColor:{
        color:'#1986FE',
    },
    
});